<template>
	<view class="index c0 bf7 f16">
		<view class="bf">
			<u-tabs :list="list" :current="current" :scrollable="false" lineWidth="40px" lineColor="linear-gradient(to right, #fee14f, #fdc450)"
				@change="tabChange" :activeStyle="{ color: '#303133',fontWeight: 'bold', transform: 'scale(1.05)'}"></u-tabs>
		</view>
		<view class="dfbc time f14 mb10 mt10">
			<view>
				<uni-datetime-picker v-model="time" type="datetimerange" @change="maskClick">
					<view class="dfa p-5-10 screen">
						<text class="mr5">筛选时间</text>
						<u-icon name="arrow-down-fill" color="#222" size="16"></u-icon>
					</view>
				</uni-datetime-picker>
			</view>
			<!-- <view class="f-1 dfac ml10" style="border-left: 1px solid #ddd;">
				<view class="screen p-5-10" :class="item.value==activeNum?'istab':''" v-for="(item,index) in list2"
					:key="index"
					:style="{color:item.value==activeNum?'#000':'',border:item.value==activeNum?'1px solid'+subColor:''}"
					@click="clickActive(item,index)">{{item.name}}</view>
			</view> -->
			<view class="f-1" style="overflow: auto;">
				<view class="types" style="overflow-x: auto;">
					<view class="type c0 f12" :class="activeNum == item.value?'isType':''" v-for="(item,index) in list2" :key="index"
						:style="{background:activeNum == item.value?'linear-gradient(to right, #fee14f, #fdc450)':'',fontWeight:activeNum==item.value?'bold':''}"
						@click="clickActive(item,index)">{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<view v-if="current==0" class="f-1 p10 bf">
			<business ref="businessRef"></business>
		</view>
		<view v-if="current==1" class="f-1 bf">
			<goods ref="goodsRef"></goods>
		</view>
		<view v-if="current==2" class="f-1 p-0-10 bf">
			<vip ref="vipRef"></vip>
		</view>
		<view v-if="current==3" class="f-1 p10 bf">
			<storedValue ref="storeValRef"></storedValue>
		</view>
	</view>
</template>

<script>
	import business from './components/business.vue'
	import goods from './components/goods.vue'
	import vip from './components/vip.vue'
	import storedValue from './components/storedValue.vue'
	export default {
		components: {
			business,
			goods,
			vip,
			storedValue
		},
		data() {
			return {
				subColor: uni.getStorageSync('subject_color'),
				current: 0,
				activeNum: 2,
				list: [{
					name: '营业概况',
				}, {
					name: '商品概况',
				}, {
					name: '会员概况'
				}, {
					name: '储值消费'
				}, ],
				list2: [{
						name: '昨天',
						value: -1,
					},
					{
						name: '今天',
						value: 2,
					},
					{
						name: '7天',
						value: 7,
					},
					{
						name: '15天',
						value: 15,
					},
					{
						name: '30天',
						value: 30,
					}
				],
				time: [],
				queryForm: {
					timeType: 2,
				},
			}
		},
		onLoad() {
			this.switchData()
		},
		methods: {
			tabChange(item) {
				if (this.current == item.index) return
				this.current = item.index
				this.activeNum = 2
				this.queryForm.timeType = 2
				this.switchData()
			},
			clickActive(v, i) {
				if (v.value == this.activeNum) return
				this.activeNum = v.value
				this.queryForm.timeType = v.value
				this.queryForm.startTime = ''
				this.queryForm.endTime = ''
				this.switchData()
			},
			maskClick(e) {
				console.log(this.time)
				if (this.time) {
					this.queryForm.startTime = this.time[0]
					this.queryForm.endTime = this.time[1]
					this.queryForm.timeType = 1
					this.activeNum = 1
				}
				this.switchData()
			},
			switchData() {
				if (this.current == 0) {
					this.$nextTick(() => this.$refs['businessRef'].fetchNewOrder(this.queryForm))
				} else if (this.current == 1) {
					this.$nextTick(() => this.$refs['goodsRef'].fetchData(this.queryForm))
				} else if (this.current == 2) {
					this.$nextTick(() => this.$refs['vipRef'].fetchVips(this.queryForm))
				} else if (this.current == 3) {
					this.$nextTick(() => this.$refs['storeValRef'].fetchValue(this.queryForm))
				}
			},
			cNum(i) {
				if (i == 0) {
					this.fetchGoods()
				} else {
					this.fetchCat()
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		/deep/.time {
			.screen {
				// background-color: #eee;
				border-radius: 30rpx;
				border: 1px solid #eee;
			}

			.istab {
				background: #fff;
			}

			.uni-datetime-picker--btn {
				background-color: #FDDA34;
				color:#000 !important;
			}

			.uni-calendar-item--multiple .uni-calendar-item--before-checked,
			.uni-calendar-item--multiple .uni-calendar-item--after-checked {
				background-color: #FDDA34
			}

			.uni-calendar-item__weeks-box .uni-calendar-item--checked {
				background-color: #FDDA34 !important;
			}
			
			.uni-calendar-item--before-checked .uni-calendar-item--checked-text, .uni-calendar-item--after-checked .uni-calendar-item--checked-text {
			    color: #000 !important;
			}
		}

		/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
		.charts-box {
			width: 100%;
			height: 300px;
		}

	}
	.types {
		width: 650px;
		height: 54rpx;
	
		.type {
			display: inline-block;
			margin-right: 20rpx;
			padding: 10rpx 20rpx;
			height: 50rpx;
			border-radius: 8rpx;
			background: #fff;
		}

	}
</style>